<template>
  <div class="flex-yc a">
    <i :class="['iconfont', `icon-${column.icon || 'dir'}`]"></i>
    <span>{{ data[prop] }}</span>
  </div>
</template>

<script>
export default {
  props: {
    prop: String,
    column: {
      type: Object,
      default: () => ({}),
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
}
</script>

<style scoped lang="scss">
.flex-yc {
  display: inline-block;

  &:hover {
    span {
      color: $primary;
      text-decoration: underline;
    }
  }

  i {
    margin-right: 5px;
    font-size: 14px;
    color: #ffd741;
  }

  span {
    font-size: 14px;
    color: #425779;
  }
}
</style>
